<!DOCTYPE html>
<html lang="zh-cn">

<head>

  <meta content="text/html;charset=utf-8" http-equiv="content-type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

  <title>滑雪族 - 报名查询</title>

  <!-- Bootstrap Core CSS -->
<!-- MetisMenu CSS -->
<!-- Custom CSS -->
<!-- Custom Fonts -->
  <!-- Timeline CSS -->
  <!-- Morris Charts CSS -->
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
    <link rel="stylesheet" href="/server/r/bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/server/r/bower_components/metisMenu/dist/metisMenu.min.css" />
    <link rel="stylesheet" href="/server/r/static/css/sb-admin-2_e507c2b.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/static/css/hxz/common_2baa698.css" />
    <link rel="stylesheet" href="/server/r/static/css/timeline_1c13c9f.css" />
    <link rel="stylesheet" href="/server/r/bower_components/morrisjs/morris.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.core.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/bower_components/select2/dist/css/select2.min.css" />
</head>

<body>
<div id="wrapper">
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

    <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="activity-list">滑雪族 管理</a>
</div>
<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">
  <!-- /.dropdown -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-user">
      <li><a href="/manage/logout"><i class="fa fa-sign-out fa-fw"></i> 退出系统</a>
      </li>
    </ul>
    <!-- /.dropdown-user -->
  </li>
  <!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->

    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
  <li>
    <a href="#"><i class="fa fa-asterisk fa-fw"></i> 产品管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/activity-list"> 产品查询</a>
      </li>
      <li>
        <a href="/manage/manage-organizer-render-activity"> 产品显示控制</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="/#"><i class="fa fa-male fa-fw"></i> 报名管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/player-list"> 报名查询</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-list-alt fa-fw"></i> 订单管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/order-list"> 订单查询</a>
      </li>
      <li>
        <a href="/manage/refund-list"> 退款管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-check-circle fa-fw"></i> 主办方认证<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/organizer-edit"> 创建主办方</a>
      </li>
      <li>
        <a href="/manage/organizer-list"> 主办方列表</a>
      </li>
      <li>
        <a href="/manage/organizer-print"> 冬令营打印设置</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-picture-o fa-fw"></i> 雪场管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/ski-field-edit"> 创建雪场</a>
      </li>
      <li>
        <a href="/manage/ski-field-list"> 雪场列表</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-users fa-fw"></i> 教练管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/coach-list"> 预约情况</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-credit-card fa-fw"></i> 结算管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/manage-transfer-list"> 转账管理</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-apply-list"> 提现申请</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-record-list"> 结算列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-rmb fa-fw"></i> 财务管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/stream-list"> 交易流水</a>
      </li>
      <li>
        <a href="/manage/manage-bill-record-list"> 对账列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-dollar fa-fw"></i> 营销管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/marketing-list"> 返利管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-comments fa-fw"></i> 评价管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/comment-list">评价管理</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-tasks fa-fw"></i> 定时处理管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/quartz-list"> 定时处理列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-wechat fa-fw"></i> 微信页面管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/typography-list"> 微信首页管理</a>
      </li>
      <li>
        <a href="/manage/activity-weight-manage"> 活动置顶</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
</ul>
      </div>
      <!-- /.sidebar-collapse -->
    </div>
    <!-- /.navbar-static-side -->
  </nav>
  <!--放置从ftl中取出的activityId-->
  <input id="activityId" value="${activityId!''}" type="hidden">
  <input id="episodeId" value="${episodeId!''}" type="hidden">

  <div id="page-wrapper">
    <div class="row">
      <div class="col-lg-12">
        <h3 class="page-header">报名查询</h3>
      </div>
      <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->

    <div class="form-inline">
      <div class="form-group">
        <label>产品：</label>
        <select class="form-control" id="player-activity"></select>
      </div>
      <div class="form-group" id="episode-form-group" style="display: none;">
        <label>子项目：</label>
        <select class="form-control" id="player-episode"></select>
      </div>
    </div>


    <div class="form-inline">
      <div class="form-group">
        <label>姓名：</label>
        <input class="form-control input-sm" id="player-name">
      </div>
      <div class="form-group">
        <label>联系电话：</label>
        <input class="form-control input-sm" id="player-phone">
      </div>
      <div class="form-group">
        <label>状态：</label>
        <select class="form-control" id="player-status"></select>
      </div>
      <div class="form-group">
        <a id="play-filter" type="button" class="btn btn-sm btn-success btn-outline">查询</a>
        <a href="/manage/player-list" type="button" class="btn btn-sm btn-success btn-outline">全部</a>
        <a id="export-excel" type="button" class="btn btn-sm btn-success">导出excel</a>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            报名列表
            <div class="pull-right">
              (共查询：<label id="plays"></label>条记录)
            </div>
          </div>
          <!-- /.panel-heading -->
          <div class="panel-body">
            <div class="dataTable_wrapper">
              <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                  <th>报名ID</th>
                  <th>下单用户</th>
                  <th>姓名</th>
                  <th>手机号</th>
                  <th>报名时间</th>
                  <th>产品</th>
                  <th>子项目</th>
                  <th>种类</th>
                  <th>价格</th>
                  <th>支付状态</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody id="player-list-body"></tbody>
              </table>
            </div>

            <!-- /.row -->
            <div class="pagination dataTables_paginate paging_simple_numbers pull-right" id="pagination" role="status"
                 aria-live="polite">
            </div>
          </div>
          <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-12 -->
    </div>
  </div>
  <!-- /#page-wrapper -->

</div>
<!-- /#wrapper --><script id="tpl-player-list-item" type="text/template">
  <tr>
    <td>{{playerId}}</td>
    <td>{{buyerName}}</td>
    <td>{{playerRealName}}</td>
    <td>{{playerPhone}}</td>
    <td>{{datetime(createTime)}}</td>
    <td>{{title}}</td>
    <td>{{episodeName}}</td>
    <td>{{chargeName}}</td>
    <td>{{price}}元</td>
    <td>{{orderStatus2String(orderStatus)}}</td>
    <td>
      <a href="/manage/order-detail?orderId={{orderId}}" type="button" class="btn btn-info btn-xs">报名详情</a>
    </td>
  </tr>
</script>
<div id="hxz-background" class="background" style="display: none; "></div>
<div id="hxz-progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>

<script src="/server/r/require.js"></script>
<script type="text/javascript">/*resourcemap*/
require.config({paths:{
  "r/bower_components/jquery/dist/jquery.min": "/server/r/bower_components/jquery/dist/jquery.min",
  "r/bower_components/underscore/underscore-min": "/server/r/bower_components/underscore/underscore-min",
  "r/static/js/hxz/hxz.valid": "/server/r/static/js/hxz/hxz.valid_12cc206",
  "r/static/js/hxz/hxz.rest": "/server/r/static/js/hxz/hxz.rest_07c8105",
  "r/bower_components/alertify/alertify.min": "/server/r/bower_components/alertify/alertify.min",
  "r/static/js/alertify-config": "/server/r/static/js/alertify-config_0cc8db2",
  "r/bower_components/bootstrap/dist/js/bootstrap.min": "/server/r/bower_components/bootstrap/dist/js/bootstrap.min",
  "r/bower_components/metisMenu/dist/metisMenu.min": "/server/r/bower_components/metisMenu/dist/metisMenu.min",
  "r/bower_components/select2/dist/js/select2": "/server/r/bower_components/select2/dist/js/select2",
  "r/static/js/hxz/hxz.ui": "/server/r/static/js/hxz/hxz.ui_0a7714d",
  "r/static/js/hxz/hxz": "/server/r/static/js/hxz/hxz_589b155",
  "r/vendor/pagination/jquery.pagination": "/server/r/vendor/pagination/jquery.pagination"
}});

  require(["r/bower_components/jquery/dist/jquery.min", "r/static/js/hxz/hxz", "r/static/js/alertify-config", "r/vendor/pagination/jquery.pagination", "r/bower_components/select2/dist/js/select2"], function ($, hxz, alertify) {

    var pagination = {};
    var playerListFilter = {};

    function fetchOption() {

      hxz.activityOptionGroup("#player-activity", "#player-episode", 207, 1);

      var statusData = [
        {"id": 999, "text": "全部"},
        {"id": 0, "text": "未支付"},
        {"id": 1, "text": "可使用"},
        {"id": 4, "text": "已关闭"},
        {"id": 5, "text": "已完成"}
      ];

      $("#player-status").select2({
        language: "zh-CN",
        placeholder: "支付状态",
        width: "100",
        data: statusData
      });

    }


    /**
     *初始化分页控件 需要页面上包含<div id="pagination"></div>
     */
    function pagination(data, callback) {
      $('#pagination').pagination(count, {
        current_page: 0,
        items_per_page: 10,
        num_display_entries: 6,
        callback: function (page) {
          //模拟ajax去后端读取页数，获取数据并渲染列表的过程
          callback(page + 1);
        },
        load_first_page: false,
        prev_text: '上一页',
        next_text: '下一页'
      });

    }


    function fetchPlayerList(page) {
      var apiPlayerList = hxz.RestApi.managePlayerList;
      playerListFilter.page = page;

      if (playerListFilter.activityId === undefined && $("#activityId").val() !== "") {
        playerListFilter.activityId = $("#activityId").val();
      }

      if (playerListFilter.episodeId === undefined && $("#episodeId").val() !== "") {
        playerListFilter.episodeId = $("#episodeId").val();
      }

      if (playerListFilter && playerListFilter.status && playerListFilter.status === "999") {
        playerListFilter.status = null;
      }

      hxz.doGet({url: hxz.getUrlByfiterOption(apiPlayerList, playerListFilter)}, function (data) {

        if (data.status == "0") {
          return alertify.log("系统错误");
        }

        $("#plays").html("").append(data.data.list.count);


        render(data.data.list.dataList, page, data.data.list.count);
      });
    }


    function render(dataList, page, count) {
      var tpl = _.template($('#tpl-player-list-item').html());
      $("#player-list-body").html("");
      for (var i = 0; i < dataList.length; i++) {
        var _data = dataList[i];
        _data.playerIndex = hxz.pageIndex(i, page);
        _data.datetime = hxz.datetime;
        _data.orderStatus2String = function (data) {
          data = Number(data);
          return hxz.orderStatus(data);
        };
        $("#player-list-body").append(tpl(_data));
      }

      if (pagination) {
        pagination = false;
        $('#pagination').pagination(count, {
          current_page: 0,
          items_per_page: 10,
          num_display_entries: 6,
          callback: function (page_id) {
            //模拟ajax去后端读取页数，获取数据并渲染列表的过程
            fetchPlayerList(page_id + 1);
          },
          load_first_page: false,
          prev_text: '上一页',
          next_text: '下一页'
        });
      }
    }

    function event() {
      $("#export-excel").unbind("click").on("click", function () {
        if ($("#player-episode").val() && $("#player-episode").val() != "0") {
          if ($("#player-status").val() && $("#player-status").val() != "") {
            var status = $("#player-status").val();
            if (status === "999") {
              status = "";
            }
            window.open("/manage/export-player-by-episode?episodeId=" + $("#player-episode").val() + "&status=" + status);
          } else {
            return alertify.log("请选择支付状态，若全部导出请选择全部！");
          }
        } else {
          return alertify.log("请选择到具体的产品！");
        }
      });
      $("#play-filter").unbind("click").on("click", function () {
        playerListFilter.activityId = ($("#player-activity").val() === "0") ? "" : $("#player-activity").val();
        playerListFilter.episodeId = ($("#player-episode").val() === "0") ? "" : $("#player-episode").val();
        playerListFilter.name = $("#player-name").val();
        playerListFilter.phone = $("#player-phone").val();
        playerListFilter.status = $("#player-status").val();
        pagination = true;
        fetchPlayerList(1);
      });
    }


    function pageInit() {
      pagination = true;
      fetchOption();
      event();
      fetchPlayerList(1);
    }

    // 执行初始化
    pageInit();

  });
</script>
</body>

</html>